<style>
table.lo2 * { font-size: 12px; font-family: Trebuchet MS; }
table.lo2 { width: 100%; }
table.lo2 td { vertical-align: top; text-align: left; }
table.lo2 td.left { width: 400px; }
table.lo2 td.middle { width: 300px; }
table.lo2 td.right { width: 400px; }
.pure_form_extra label, .pure_form_extra input { font-size: 12px !important; }
.pure_form_extra label * { font-size: 12px !important; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra { width: 100%; }
</style>

<?php 
$date = date('Y-m-d', time());
$student_id = Utils::get_param('id', 0);
$opts = new stdClass();
$opts->cd = 't.id = :v1';
$opts->cdv = array(':v1' => $student_id);
$data = $orm->get('pb_colg_student', NULL, NULL, NULL, NULL, $opts)->d;

$id_number = 0;
if (count($data) == 0) {
  $opts = new stdClass();
  $opts->sel = 't.id_number';
  $rslt = $orm->get('pb_colg_student', 't.id_number', 'DESC', 1, 1, $opts)->d;
  if (count($rslt) > 0) {
    $id_number = $rslt[0]->id_number + 1;
  }
}

$pg = Utils::get_param('pg', 1);
$objs = $orm->get('pb_colg_student', 't.id_number', 'DESC', $pg, SIZE, NULL);

$users = $orm->get('pb_colg_user', 't.first_name', 'ASC', NULL, NULL, NULL)->d;
$countries = $orm->get('pb_country', 't.name', 'ASC', NULL, NULL, NULL)->d;
$ethnic_groups = $orm->get('pb_ethnic_group', 't.ethnic_name ', 'ASC', NULL, NULL, NULL)->d;

$vts = unserialize(VTS);
?>
<button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_obj();">Save</button>
<button style="display: none;" class="pure-button" onclick="delete_obj();">Delete</button>
<button style="float: right;" class="pure-button" onclick="new_obj();">New Student</button>
<table class="lo2" cellPadding="0" cellSpacing="0" style="margin-top: 5px;">
  <tr>
    <td class="left">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>System Log</legend>
        
        <div class="pure-control-group">
          <label>User</label>
          <input id="user" type="text" class="pure-input-1-2" placeholder="{User}" readonly="true" />
        </div>
        
        <div class="pure-control-group">
          <label>Date</label>
          <input id="create_date" type="text" class="pure-input-1-2" placeholder="{Date}" readonly="true" />
        </div>
      </div>
      
      <div class="pure-form pure-form-aligned pure_form_extra">
      
        <legend>Basic</legend>
      
        <div class="pure-control-group">
          <label>ID Number<span class="mandatory">*</span></label>
          <input id="id_number" type="text" class="pure-input-1-2" placeholder="{ID Number}" />
        </div>
        
        <div class="pure-control-group">
          <label>Last Name<span class="mandatory">*</span></label>
          <input id="last_name" type="text" class="pure-input-1-2" placeholder="{Last Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>First Name<span class="mandatory">*</span></label>
          <input id="first_name" type="text" class="pure-input-1-2" placeholder="{First Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Preferred Name</label>
          <input id="preferred_name" type="text" class="pure-input-1-2" placeholder="{Preferred Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Gender</label>
          <span id="gender">
            <input type="radio" id="male" name="gender" checked="checked"><label for="male" style="width: 60px; margin-right: 0;">Male</label>
            <input type="radio" id="female" name="gender"><label for="female" style="width: 60px; margin-right: 0; margin-left: -5px;">Female</label>
          </span>
        </div>
        
        <div class="pure-control-group">
          <label>Date of Brith<span class="mandatory">*</span></label>
          <input id="date_of_birth" type="text" class="pure-input-1-2" placeholder="{Date of Brith}" />
        </div>
        
        <div class="pure-control-group">
          <label>Citizenship</label>
          <select id="citizenship" class="pure-input-1-2">
            <option value=""></option>
          </select>
        </div>
        
        <div class="pure-control-group">
          <label>Ethnic Group</label>
          <select id="ethnic_group" class="pure-input-1-2">
            <option value=""></option>
          </select>
        </div>
        
        <div class="pure-control-group">
          <label>NSN ID</label>
          <input id="nsn_id" type="text" class="pure-input-1-2" placeholder="{NSN ID}" />
        </div>
      </div>
      <div>&nbsp;</div>
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Parents</legend>
      
        <div class="pure-control-group">
          <label>Name</label>
          <input id="parents_name" type="text" class="pure-input-1-2" placeholder="{Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Phone</label>
          <input id="parents_phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>Mobile</label>
          <input id="parents_mobile" type="text" class="pure-input-1-2" placeholder="{Mobile}" />
        </div>
        
        <div class="pure-control-group">
          <label>Email</label>
          <input id="parents_email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address</label>
          <textarea id="parents_address" style="resize: none;" class="pure-input-1-2" placeholder="{Address}"></textarea>
        </div>
      </div>
    </td>
    <td class="middle">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Contact</legend>
        
        <div class="pure-control-group">
          <label>Phone</label>
          <input id="phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>Mobile</label>
          <input id="mobile" type="text" class="pure-input-1-2" placeholder="{Mobile}" />
        </div>
        
        <div class="pure-control-group">
          <label>Email</label>
          <input id="email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
        <div class="pure-control-group">
          <label>Fax</label>
          <input id="fax" type="text" class="pure-input-1-2" placeholder="{Fax}" />
        </div>
        
        <div class="pure-control-group">
          <label>Facebook ID</label>
          <input id="facebook_id" type="text" class="pure-input-1-2" placeholder="{Facebook ID}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address</label>
          <textarea id="address" style="resize: none;" class="pure-input-1-2" placeholder="{Address}"></textarea>
        </div>
      </div>
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Emergency</legend>
      
        <div class="pure-control-group">
          <label>Name</label>
          <input id="emergency_name" type="text" class="pure-input-1-2" placeholder="{Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Phone</label>
          <input id="emergency_phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>Mobile</label>
          <input id="emergency_mobile" type="text" class="pure-input-1-2" placeholder="{Mobile}" />
        </div>
        
        <div class="pure-control-group">
          <label>Email</label>
          <input id="emergency_email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address</label>
          <textarea id="emergency_address" style="resize: none;" class="pure-input-1-2" placeholder="{Address}"></textarea>
        </div>
      </div>
    </td>
    <td class="right">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Status</legend>
        
        <div class="pure-control-group">
          <label>Visa Type</label>
          <select id="visa_type" class="pure-input-1-2">
            <option value=""></option>
          </select>
        </div>
        
        <div class="pure-control-group">
          <label>Visa Expiry</label>
          <input id="visa_expiry" type="text" class="pure-input-1-2" placeholder="{Visa Expiry}" />
        </div>
      
        <div class="pure-control-group">
          <label>Passport No.</label>
          <input id="passport_no" type="text" class="pure-input-1-2" placeholder="{Passport No.}" />
        </div>
        
        <div class="pure-control-group">
          <label>Passport Expiry</label>
          <input id="passport_expiry" type="text" class="pure-input-1-2" placeholder="{Passport Expiry}" />
        </div>
        
        <div class="pure-control-group">
          <label>Insurance Company</label>
          <input id="insurance_com" type="text" class="pure-input-1-2" placeholder="{Insurance Company}" />
        </div>
        
        <div class="pure-control-group">
          <label>Insurance Expiry</label>
          <input id="insurance_expiry" type="text" class="pure-input-1-2" placeholder="{Insurance Expiry}" />
        </div>
        
        <div class="pure-control-group">
          <label>Insurance Number</label>
          <input id="insurance_number" type="text" class="pure-input-1-2" placeholder="{Insurance Expiry}" />
        </div>
        
        <div class="pure-control-group">
          <label>Medical Condition</label>
          <textarea id="medical_condition" style="resize: none;" class="pure-input-1-2" placeholder="{Medical Condition}"></textarea>
        </div>
        
        <div class="pure-control-group">
          <label>Note</label>
          <textarea id="note" style="resize: none; height: 150px;" class="pure-input-1-2" placeholder="{Note}"></textarea>
        </div>
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  /*<![CDATA[*/
  var __users = JSON.parse('<?php echo addslashes(json_encode($users)); ?>');
  var __countries = JSON.parse('<?php echo addslashes(json_encode($countries)); ?>');
  var __ethnic_groups = JSON.parse('<?php echo addslashes(json_encode($ethnic_groups)); ?>');
  var __objs = JSON.parse('<?php echo addslashes(json_encode($objs)); ?>');
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __id_number = '<?php echo $id_number; ?>';
  var __vts = JSON.parse('<?php echo addslashes(json_encode($vts)); ?>');
  var __date = '<?php echo $date; ?>';
  var __user = JSON.parse('<?php echo addslashes(json_encode($user)); ?>');
  
  $(function() {
    reset();
    $('#gender').buttonset();
    
    $('#student_title').html(__data[0].title__);

    for (var idx in __countries) {
      var itm = __countries[idx];
      $('#citizenship').append('<option value="' + itm.name + '">' + itm.name + '</option>');
    }
    $('#citizenship').on('change', function(event, ui) {
      for (var idx in __ethnic_groups) {
        var itm = __ethnic_groups[idx];
        if (itm.country_name == $('#citizenship option:selected').text()) {
          $('#ethnic_group').val(itm.ethnic_name);
          $("#ethnic_group").trigger("chosen:updated");
        }
      }
    });
    $('#citizenship').chosen({
      allow_single_deselect: true
    });

    for (var idx in __ethnic_groups) {
      var itm = __ethnic_groups[idx];
      $('#ethnic_group').append('<option value="' + itm.ethnic_name + '">' + itm.ethnic_name + '</option>');
    }
    $('#ethnic_group').chosen({
      allow_single_deselect: true
    });

    for (var idx in __vts) {
      var itm = __vts[idx];
      $('#visa_type').append('<option value="' + itm + '">' + itm + '</option>');
    }
    $('#visa_type').chosen({
      allow_single_deselect: true
    });

    $('#date_of_birth').change(function() {
      var rslt = this.value.split('/');
      if (rslt.length == 3) {
        this.value = rslt[2] + '-' + rslt[1] + '-' + rslt[0];
      }
    });

    $('#passport_expiry').change(function() {
      var rslt = this.value.split('/');
      if (rslt.length == 3) {
        this.value = rslt[2] + '-' + rslt[1] + '-' + rslt[0];
      }
    });

    $('#visa_expiry').change(function() {
      var rslt = this.value.split('/');
      if (rslt.length == 3) {
        this.value = rslt[2] + '-' + rslt[1] + '-' + rslt[0];
      }
    });

    $('#insurance_expiry').change(function() {
      var rslt = this.value.split('/');
      if (rslt.length == 3) {
        this.value = rslt[2] + '-' + rslt[1] + '-' + rslt[0];
      }
    });
    
    $('#date_of_birth').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true,
      defaultDate: '1988-11-24'
    });
    
    $('#passport_expiry').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true
    });

    $('#visa_expiry').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true
    });

    $('#insurance_expiry').datepicker({
      changeMonth: true,
      changeYear: true,
      dateFormat: "yy-mm-dd",
      showButtonPanel: true
    });
  });
  
  function reset() {
    if (__data.length == 0) {
      __data[0] = {
        id: 0,
        date: __date,
        user_id: __user.id,
        user_title__: __user.first_name + ' ' + __user.last_name,
        id_number: __id_number,
        first_name: '',
        last_name: '',
        preferred_name: '',
        gender: 0,
        date_of_birth: '0000-00-00',
        citizenship: '',
        ethnic_group: '',
        nsn_id: '',
        phone: '',
        mobile: '',
        email: '',
        fax: '',
        facebook_id: '',
        address: '',
        visa_type: '',
        visa_expiry: '0000-00-00',
        insurance_com: '',
        insurance_expiry: '0000-00-00',
        insurance_number: '',
        passport_no: '',
        passport_expiry: '0000-00-00',
        parents_name: '',
        parents_phone: '',
        parents_mobile: '',
        parents_email: '',
        parents_address: '',
        emergency_name: '',
        emergency_phone: '',
        emergency_mobile: '',
        emergency_email: '',
        emergency_address: '',
        medical_condition: '',
        note: '',
        title__: ''
      };
    }
  };
  
  function render_data() {
    Url.insert_param('id', __data[0].id);
    $('#create_date').val(__data[0].date);
    $('#user').val(__data[0].user_title__);
    $('#id_number').val(__data[0].id_number);
    $('#first_name').val(__data[0].first_name);
    $('#last_name').val(__data[0].last_name);
    $('#preferred_name').val(__data[0].preferred_name);
    $('#date_of_birth').val(__data[0].date_of_birth);
    $('#citizenship').val(__data[0].citizenship);
    $('#ethnic_group').val(__data[0].ethnic_group);
    $('#nsn_id').val(__data[0].nsn_id);
    $('#phone').val(__data[0].phone);
    $('#mobile').val(__data[0].mobile);
    $('#fax').val(__data[0].fax);
    $('#email').val(__data[0].email);
    $('#facebook_id').val(__data[0].facebook_id);
    $('#address').val(__data[0].address);
    $('#visa_type').val(__data[0].visa_type);
    $('#visa_expiry').val(__data[0].visa_expiry);
    $('#insurance_com').val(__data[0].insurance_com);
    $('#insurance_expiry').val(__data[0].insurance_expiry);
    $('#insurance_number').val(__data[0].insurance_number);
    $('#passport_no').val(__data[0].passport_no);
    $('#passport_expiry').val(__data[0].passport_expiry);
    $('#parents_name').val(__data[0].parents_name);
    $('#parents_phone').val(__data[0].parents_phone);
    $('#parents_mobile').val(__data[0].parents_mobile);
    $('#parents_email').val(__data[0].parents_email);
    $('#parents_address').val(__data[0].parents_address);
    $('#emergency_name').val(__data[0].emergency_name);
    $('#emergency_phone').val(__data[0].emergency_phone);
    $('#emergency_mobile').val(__data[0].emergency_mobile);
    $('#emergency_email').val(__data[0].emergency_email);
    $('#emergency_address').val(__data[0].emergency_address);
    $('#medical_condition').val(__data[0].medical_condition);
    $('#note').val(__data[0].note);

    if (__data[0].gender == 0) {
      $("#male").prop("checked", true)
    } else {
      $("#female").prop("checked", true)
    }
    $('#gender').buttonset('refresh');

    $("#citizenship").trigger("chosen:updated");
    $("#ethnic_group").trigger("chosen:updated");
    $("#visa_type").trigger("chosen:updated");
  };

  function submit_obj() {
    req = __data[0];
    req.id_number = $('#id_number').val();
    req.first_name = $('#first_name').val();
    req.last_name = $('#last_name').val();
    req.preferred_name = $('#preferred_name').val();
    req.gender = $('#male').is(':checked') ? 0 : 1;
    req.date_of_birth = $('#date_of_birth').val();
    req.citizenship = $('#citizenship option:selected').val();
    req.ethnic_group = $('#ethnic_group option:selected').val();
    req.nsn_id = $('#nsn_id').val();
    req.phone = $('#phone').val();
    req.mobile = $('#mobile').val();
    req.fax = $('#fax').val();
    req.email = $('#email').val();
    req.facebook_id = $('#facebook_id').val();
    req.visa_type = $('#visa_type option:selected').val();
    req.visa_expiry = $('#visa_expiry').val();
    req.insurance_com = $('#insurance_com').val();
    req.insurance_expiry = $('#insurance_expiry').val();
    req.insurance_number = $('#insurance_number').val();
    req.passport_no = $('#passport_no').val();
    req.passport_expiry = $('#passport_expiry').val();
    req.address = $('#address').val();
    req.parents_name = $('#parents_name').val();
    req.parents_phone = $('#parents_phone').val();
    req.parents_mobile = $('#parents_mobile').val();
    req.parents_email = $('#parents_email').val();
    req.parents_address = $('#parents_address').val();
    req.emergency_name = $('#emergency_name').val();
    req.emergency_phone = $('#emergency_phone').val();
    req.emergency_mobile = $('#emergency_mobile').val();
    req.emergency_email = $('#emergency_email').val();
    req.emergency_address = $('#emergency_address').val();
    req.medical_condition = $('#medical_condition').val();
    req.note = $('#note').val();
    req.title__ = req.id_number + ' ' + req.first_name + ' ' + req.last_name + ((req.preferred_name == '') ? '' : ' (' + req.preferred_name + ')');
    req.__pg = __objs.p;
    
    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        if (rslt.__objs) {
          __objs = rslt.__objs;
          delete rslt.__objs;
        }
        __data[0] = rslt;
        render();
      },
      null
    );
  };
  
  function delete_obj() {
    Ajax.request(
      __requrl.replace(__file, 'index') + 'delete_obj',
      'req=' + Utils.encodeURI(JSON.stringify(__data[0])),
      function(rslt) {
        Url.redirect(__redmd, __sys + '.php?i=' + __id);
      },
      { confirm: 1 }
    );
  };
  
  function new_obj() {
    Ajax.request(
      __requrl + 'new_obj',
      '',
      function(rslt) {
        __id_number = rslt[0];
        __data = [];
        reset();
        render();
      },
      null
    );
  };
  /*]]>*/
</script>